@import (less) "../less/z-index.less";
/**
 * TabPanel
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#tabspanel
 */

.ui-tabs {
  &-nav,
  &-panel {
    font-family: @lucida_sans_serif-1;
  }

  &-nav {
    list-style: none !important;
    margin: 0 0 18px !important;
    clear: right;
    &:after { /* clearing without presentational markup, IE gets extra treatment */
      display: block;
      clear: both;
      content: " ";
    }
    li {
      list-style: none !important;
      margin: 0 0 0 1px;
      min-width: 54px; /* be nice to Opera */
    }
    a {
      display: block;
      font-weight: 600;
      font-size: .6875em;
      background: @white;
      border-bottom: 3px solid @lightest-grey;
      padding: 4px 8px 3px;
      text-decoration: none;
      text-transform: uppercase;
      white-space: nowrap; /* required in IE 6 */
      outline: 0; /* prevent dotted border in Firefox */
      /* stylelint-disable max-nesting-depth */
      &:link,
      &:visited {
        color: @link-blue;
      }
      &:hover {
        color: @link-blue;
        text-decoration: underline;
      }
      /* stylelint-enable max-nesting-depth */
    }
    /* stylelint-disable selector-max-specificity */
    .ui-tabs-active {

      /* stylelint-disable max-nesting-depth */
      a {
        &:link,
        &:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
          background: @lightest-grey;
          border: 1px solid @lightest-grey;
          border-bottom: 3px solid @lightest-grey;
          color: @teal;
          cursor: default;
        }
      }
      /* stylelint-enable max-nesting-depth */
    }
    /* stylelint-disable no-descending-specificity */
    a:hover,
    a:focus,
    a:active,
    .ui-tabs-deselectable a:hover,
    .ui-tabs-deselectable a:focus,
    .ui-tabs-deselectable a:active { /* @ Opera, we need to be explicit again here now... */
      cursor: pointer;
    }
    /* stylelint-enable no-descending-specificity */
    /* stylelint-enable selector-max-specificity */
  }
  &-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
  }
  &-panel {
    border: 3px solid @lightest-grey;
    background: @white;
    /* declare background color for container to avoid distorted fonts in IE while fading */
  }
  &-loading {
    em {
      padding: 0 0 0 20px;
    }
  }
}

// These rules apply within overlays
// e.g. when you click "change cover" on a books page
// Need to investigate whether these can be generalised somehow.
.floater {
  .ui-tabs-panel {
    border: none;
    background: @white;
    /* declare background color for container to avoid distorted fonts in IE while fading */
  }
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
  display: inline-block;
}

*:first-child + html .ui-tabs-nav {
  /* @ IE 7 Standards Mode - do not group selectors,
  otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
  display: inline-block;
}

@media only screen and (min-width: @width-breakpoint-tablet) {
  .floater {
    .ui-tabs-panel {
      border-top: 3px solid @lightest-grey;
    }
  }

  .tabs-panel {
    padding: 15px 30px 20px !important;
  }
  .ui-tabs-nav {
    margin-bottom: -3px !important;
    li {
      float: left;
    }
    a {
      margin: 8px 3px 0;
    }
    .ui-tabs-active {
      a {
        padding: 2px 8px 3px;
      }
    }
  }
  .floater {
    .ui-tabs-panel {
      padding: 15px 30px !important;
      /* declare background color for container to avoid distorted fonts in IE while fading */
    }
  }
}

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen, print {
  /* Use class for showing/hiding tab content,
  so that visibility can be better controlled in different media types... */
  .ui-tabs-hide {
    display: none;
  }
}
